<template>
  <div id="app">
    <h3>vue3.0中使用this.$router.push()</h3>
    <div class="mt-10">
      <button type="button" @click="handleClick">
        点击跳转到表单
      </button>
    </div>
    <h3>hello， 欢迎使用vue-cli3.0创建项目</h3>
    <div>初始版本为: {{ count }}</div>
    <div>变更的版本为:{{ double }}</div>
    <div>
      computed:
      <input v-model="inputValue" type="text" @click="handleClickPlusValue" />
      <!--文本框输入响应在此处 -->
      <span class="ml-10">{{ plusValue }}</span>
    </div>
    <button class="mt-10" @click="increment">
      点击
    </button>
    <h3>任务清单</h3>
    <!-- <input type="text" v-model="state.newTodo" @keyup.enter="addTodo" /> -->
    <!--使用toRefs包裹对象state的形式 -->
    <div :class="{ 'fixed-item': top > 30 }">
      <input v-model="newTodo" type="text" @keyup.enter="addTodo" />
      <button @click="addTodo">
        添加
      </button>
    </div>
    <ul>
      <li
        v-for="(it, idx) in todos"
        :key="it.id"
        :class="{ done: it.completed }"
        @click="toggle(idx)"
      >
        {{ it.title }}
      </li>
    </ul>
    <ul>
      <li
        v-for="(it, idx) in todos"
        :key="it.id"
        :class="{ done: it.completed }"
        @click="toggle(idx)"
      >
        {{ it.title }}
      </li>
    </ul>
    <ul>
      <li
        v-for="(it, idx) in todos"
        :key="it.id"
        :class="{ done: it.completed }"
        @click="toggle(idx)"
      >
        {{ it.title }}
      </li>
    </ul>
    <ul>
      <li
        v-for="(it, idx) in todos"
        :key="it.id"
        :class="{ done: it.completed }"
        @click="toggle(idx)"
      >
        {{ it.title }}
      </li>
    </ul>
    <ul>
      <li
        v-for="(it, idx) in todos"
        :key="it.id"
        :class="{ done: it.completed }"
        @click="toggle(idx)"
      >
        {{ it.title }}
      </li>
    </ul>
    <ul>
      <li
        v-for="(it, idx) in todos"
        :key="it.id"
        :class="{ done: it.completed }"
        @click="toggle(idx)"
      >
        {{ it.title }}
      </li>
    </ul>
    <div>还没有完成的任务清单的个数:{{ remaining }}</div>
    <h3>滚动的高度{{ top }}</h3>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
// 若不进行import的话,则打包可以把代码丢掉，这就是所谓的tree-shaking(按需编译代码)
// composition最牛逼的地方，是可以拆开成独立的函数，放在其他文件中
// vue2中通过使用mixins,但是又找不到源头，容易被子组件覆盖
// 拆分复杂的函数
import { ref, reactive, watchEffect, toRefs, computed } from 'vue'
import useAddTodo from './components/common/todo.js'
import scroll from './components/common/scroll'
import updateValue from './components/common/plusValue'
export default {
  // name: 'App',
  // components: {
  //   HelloWorld
  // }
  setup() {
    const count = ref(0)
    // 定义变量
    const inputValue = ref(null)

    // computed方法使用
    const plusValue = computed({
      get: () => {
        return count.value
      },
      set: val => {
        count.value = val
      }
    })
    // 拆分独立方法
    const { handleClickPlusValue } = updateValue(inputValue, plusValue)
    /** 覆盖count=ref(0)的初始化 */
    const state = reactive({
      count: 1,
      newTodo: '',
      todos: [
        {
          id: '1',
          title: '吃饭',
          completed: true
        },
        {
          id: '2',
          title: '打王者',
          completed: false
        },
        {
          id: '3',
          title: '写代码',
          completed: false
        }
      ]
    })

    const double = computed(() => state.count * 2)
    // 监听函数
    watchEffect(() => {
      console.log(double.value, '使用watchEffect监听函数')
    })

    // computed返回是函数
    const remaining = computed(() => {
      console.log(
        '打印出proxy对象：',
        state.todos.filter(it => !it.completed)
      )
      return state.todos.filter(it => !it.completed).length
    })

    // 拆分独立函数方法
    const { addTodo, toggle } = useAddTodo(state)
    // 拆分独立的文件,任何数据的来源，都很清楚,mixins是做不到滴
    const { top } = scroll()

    const increment = () => {
      state.count++
    }

    // this.$router.push的跳转

    // return {
    //   count,
    //   inct,
    //   state, //没有合并对象
    //   addTodo
    // };
    return {
      count,
      double,
      increment,
      inputValue,
      plusValue,
      handleClickPlusValue,
      ...toRefs(state),
      remaining,
      toggle,
      top,
      addTodo
    }
  }
}
</script>

<style scoped>
.plus-val {
  margin-left: 20px;
}

/** 样式也会写错 */
li.done {
  color: brown;
  text-decoration: line-through;
}
.fixed-item {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
